import React, {Component} from 'react';
import CommentInput from './CommentInput'
import CommentList from './CommentList'
import '../../style/Comment.css'

class Comment extends Component {

    constructor(prop) {
        super(prop)
        this.state = {
            commentList: []
        }

    }

    onSubmit = (commentItem) => {
        this.state.commentList.unshift(commentItem)
        this.setState({
            commentList: this.state.commentList
        })
    }

    onDelete = (index) => {
        let {commentList} = this.state
        commentList.splice(index, 1)
        this.setState({
            commentList
        })
    }

    render() {
        const {onDelete} = this
        const {commentList} = this.state
        return (
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">留言板</h1>
                    <small className="App-desc">欢迎大家留言！</small>
                </header>
                <div className="Comment">
                    <CommentInput onSubmit={this.onSubmit}/>

                    <hr className="Comment-split"/>

                    <CommentList comments={commentList} onDelete={onDelete}/>
                </div>
            </div>
        )
    }
}

export default Comment